<template>
  <div class="student-exam">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span>学生组卷</span>
          <el-button type="primary" @click="handleCreateExam">新建组卷</el-button>
        </div>
      </template>

      <el-form :inline="true" class="search-form">
        <el-form-item label="学生姓名">
          <el-input v-model="searchForm.studentName" placeholder="请输入学生姓名" />
        </el-form-item>
        <el-form-item label="试卷名称">
          <el-input v-model="searchForm.examName" placeholder="请输入试卷名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" v-loading="loading">
        <el-table-column label="试卷名称" prop="name" />
        <el-table-column label="学生姓名" prop="studentName" />
        <el-table-column label="科目" prop="subject" />
        <el-table-column label="题目数量" prop="questionCount" />
        <el-table-column label="考试时长(分钟)" prop="duration" />
        <el-table-column label="开始时间" prop="startTime" />
        <el-table-column label="状态" prop="status">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">查看</el-button>
            <el-button v-if="row.status === 'draft'" link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button v-if="row.status === 'draft'" link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const tableData = ref([])

const searchForm = ref({
  studentName: '',
  examName: ''
})

// 状态映射
const statusMap = {
  draft: { type: 'info', text: '草稿' },
  pending: { type: 'warning', text: '待考试' },
  ongoing: { type: 'success', text: '进行中' },
  completed: { type: 'primary', text: '已完成' }
}

const getStatusType = (status) => statusMap[status]?.type || 'info'
const getStatusText = (status) => statusMap[status]?.text || '未知'

const handleCreateExam = () => {
  // TODO: 跳转到创建组卷页面
}

const handleSearch = () => {
  // TODO: 实现搜索功能
}

const handleReset = () => {
  searchForm.value = {
    studentName: '',
    examName: ''
  }
}

const handleView = (row) => {
  router.push(`/exam/detail/${row.id}`)
}

const handleEdit = (row) => {
  // TODO: 实现编辑功能
}

const handleDelete = (row) => {
  // TODO: 实现删除功能
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}
</style>
